<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物资分类列表</title>
    <link rel="stylesheet" href="/css/elementui/index.css">
    <link rel="stylesheet" href="/css/exam/css/style.css">
    <link rel="stylesheet" href="/iconfont/iconfont.css">
    <script src="/css/exam/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
  <!--导航切换-->

  <div class="p-30">
    <el-row type="flex" class="row-bg" justify="space-between">
       <el-form :inline="true" :model="formInline" ref="formInline" label-width="100px" class="demo-ruleForm">
            <el-form-item label="" placeholder="请输入分类名称">
			<el-cascader
			    class="w-400px"
			    :clearable="true"
			    :options="goodsdata"
			    :props="props"
			    v-model="formInline.name"
				placeholder="请选择分类名称"
				clearable
				 ref='postSelectRef' 
				 @change='postValueChange($event)'
			></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchput('formInline')">搜&ensp;&ensp;索</el-button>
                <el-button @click="resetForm('formInline')">重&ensp;&ensp;置</el-button>
            </el-form-item>
        </el-form>
      <el-row>
        <el-button type="primary" @click="downloadExcel()"><span style="display:block;color:#fff;text-decoration:none"><i class="el-icon-download"></i>导&ensp;&ensp;出</a></el-button>
      </el-row>
    </el-row>

    <template>
        <el-table  :data="list" row-key="id"  border  style="width: 100%" :tree-props="{children: 'children'}" v-loading="loading">   
            <el-table-column prop="id" label="序&ensp;&ensp;号" width="120"> </el-table-column>
            <el-table-column prop="name" label="分类名称" width=""> </el-table-column>
            <el-table-column fixed="right"  label="操&ensp;&ensp;作"  width="">
            <template slot-scope="scope">
			    <el-button type="primary" size="mini"><a  style="color:#fff" :href="'/admin/warehouse/stockcontrol?id=' + scope.row.id">详&ensp;&ensp;情</a></el-button>
                <el-button type="danger"  size="mini" @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text" >删&ensp;&ensp;除</el-button>
            </template>
            </el-table-column>
        </el-table>
        <el-alert title="*（备注：只有入库、出库、在库、损耗数量均为0时才可删除分类）" type="error" style="background-color:transparent"></el-alert>
    </template>
  </div>

</div>

<script src="/css/exam/js/vue.js"></script>
<script src="/css/elementui/index.js"></script>
<script src="/css/exam/js/axios.min.js"></script>
<script src="/css/exam/js/common.js"></script>
<script>

const app = new Vue({
  el: '#app',
  data() {
    return { 
      loading: false,
      list: [], //数据
	  goodsdata:[],
      currentPage: 1, // 当前页码
      count: 10, // 总条数
      pageSize: 10,// 每页的数据条数
      formInline:{
        name:null,
      },
      CascaderLabel:'',
      editListForm: {
        id:'',
        name:'',
        remarks: '',
      },

      title:'',
      dialogFormVisible:false,

      url:'',
      file_name:'',
	  props: {
	    value: 'id',
	    label: 'name',
	    children: 'children',
	    checkStrictly: true,
	  },
    }
  },
  created() {
    this.getdata()
    this.getgoodsdata()
  },

  methods: {
         // 删除列表行
         deleteRow(index, rows) { 
                this.$confirm('确定要删除吗?', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                   
                })
                .then(() => {                  
                  axios.post('/admin/goods/goodsdelete',{id:rows.id})
                    .then(response =>{
                      this.getdata() 
					  if(response.data.code==200){
					  		this.$message.success("删除成功")
					  }
                      if(response.data.code==408){
                      		this.$message.error(response.data.message)
                      }                  
                    }).catch(error =>{
                      
                    })
                })
          },

          getdata() {    
            this.loading = true  
            let vm = this 
            axios.post('/admin/goods/goodslistdata',{name:vm.CascaderLabel,page:vm.currentPage,limit:vm.pageSize})
            .then(response =>{
                vm.list = response.data.data.list;
                vm.count = response.data.data.count; 
                vm.loading = false; 
            }).catch(error =>{
                console.log('请求失败：' + error);
                vm.loading = false; 
            })
          },
		   
		  //获取物资分类
		  getgoodsdata() {  
		      let vm = this   
		      axios.post('/admin/goods/goods_all')
		      .then(response =>{
		          vm.goodsdata = response.data.data;
		      }).catch(error =>{
		          console.log('请求失败：' + error);
		      })
		  }, 
		   

          // 搜索事件         
          searchput(){
            this.currentPage = 1;
            this.getdata() 
          }, 
          resetForm(formName) {
            this.$refs["postSelectRef"].clearCheckedNodes()
			this.$refs["postSelectRef"].activePath = []
			this.$refs["postSelectRef"].syncActivePath()
			this.CascaderLabel = ''
            this.getdata() 
          },
          // 分页页码  
          handleSizeChange(val){
            console.log(`每页 ${val} 条`);
			      this.currentPage = 1;
			      this.pageSize = val;
            this.getdata()
          },
          handleCurrentChange(val){
            console.log(`当前页: ${val}`);
			      this.currentPage = val;
            this.getdata()
					  
          },
          //导出文件
          downloadExcel() {
            let vm = this
            axios.post('/admin/goods/exportone',{name:vm.formInline.name})
                .then((res) => {
                  let url = res.data.url
                  let file_name = res.data.file_name
                  let link = document.createElement("a");
                  link.style.display = "none";
                  link.href = url;
                  link.setAttribute = file_name;
                  document.body.appendChild(link);
                  link.click();
                  document.body.removeChild(link)
                })
                .catch((err) => {
                  console.log(err);
                });
            },

          // downloadExcel() {
          //   let vm = this
          //   axios.post('/admin/goods/exportone',{name:vm.formInline.name},
          //   {headers: { "Content-Type": "multipart/form-data" },responseType: "blob"})
          //       .then((res) => { console.log(res);
          //         let url = window.URL.createObjectURL(
          //           new Blob([response.data.url], {
          //             type: "application/vnd.ms-exce",  //此处type设置vnd.ms-exce
          //           })
          //         );
          //         let link = document.createElement("a");
          //         link.style.display = "none";
          //         link.href = url;
          //         link.setAttribute(
          //           "download",
          //           "下载物资分类列表.xlsx"    //此处需注意 加.xlsx
          //         );
          //         document.body.appendChild(link);
          //         link.click();
          //       })
          //       .catch((err) => {
          //         console.log(err);
          //       });
          //   },

		postValueChange(value) {
			if(this.$refs["postSelectRef"].getCheckedNodes()[0]){
				let pathlabel = this.$refs["postSelectRef"].getCheckedNodes()[0].pathLabels
				console.log(pathlabel,'eeeeee');
				this.CascaderLabel = pathlabel[pathlabel.length - 1]
			}

		},
    

    },

  })

</script>
<style scoped>
  a{color:#409EFF;text-decoration: none;}
  .el-table .el-table__cell:first-child{text-align: center;}
  // .el-table__indent{padding-left: 0!important;}
</style>
</body>
</html>